<template>
  <div id="signuprecords">
    <div class="date-block">
      <el-date-picker
        v-model="pickedDate"
        type="date"
        placeholder="选择日期"
        value-format="yyyy-MM-dd"
        @change='changeDate'
        >
      </el-date-picker>
    </div>
    <el-table
      :data="records"
      style="width: 100%"
      :default-sort = "{prop: 'date', order: 'descending'}"
      :empty-text='empty_text'
      >
      <el-table-column
        prop="studentId"
        label="学号"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="date"
        label="签到日期"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="class"
        label="班级"
        sortable
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label="签到状态"
        sortable
        width="100"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import moment from 'moment'
import * as qs from 'qs'
import * as _ from 'lodash'

export default {
  name: 'signupRecords',
  props: {
    uid: ''
  },
  data() {
    return {
      pickedDate: moment().format('YYYY-MM-DD'),
      records: [],
      empty_text: '前一天无签到数据'
    }
  },
  mounted() {
    this.getSignupRecordsByDate()
    const today = moment().format('YYYY-MM-DD')
    if(moment()>moment(today).add(21,'hours')&&pickedDate===today) {
      this.empty_text = '昨天无签到数据'
    }
  },
  methods: {
    getSignupRecordsByDate() {
      this.axios({
        method: 'post',
        url: '/getSignupRecords',
        data: qs.stringify({ date: this.pickedDate, id: this.uid }),
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(({ data }) => {
        if (data.status) {
          const { students } = data.data
          this.records = []
          _.forEach(students, (item) => {
            if (item.signinrecords.length) {
              const oneRecord = item.signinrecords.pop()
              oneRecord.class = item.class
              oneRecord.date = moment(oneRecord.time).format('YYYY-MM-DD')
              oneRecord.name = item.name
              this.records.push(oneRecord)
            }
          })
        }
      })
    },
    changeDate(date) {
      this.getSignupRecordsByDate()
    }
  }
}
</script>
<style lang="less" scoped>
.date-block {
  padding: 15px;
}
</style>
